// path nodejs核心模块，用来处理路径问题
const path = require("path")
module.exports = {
  entry: "./src/main.js",
  output: {
    // __dirname 当前文件夹目录
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js",
    // 自动清空上次打包内容
    clean: true
  },
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/i,
        use: [
          // 执行顺序从右到左
          'style-loader',
          'css-loader',
        ],
      },
      //   处理less资源
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 小于10kb的图片转base64
            // 优点：减少请求次数 缺点：图片大小增加了
            maxSize: 180 * 1024 // 10kb
          }
        },
        // 输出图片名称
        generator: {
          // [hash:10] 取hash值前10位
          filename: 'static/images/[hash][ext][query]'
        }
      },
      {
        test: /\.(ttf|woff2?|mp3|mp4|avi)$/i,
        type: 'asset/resource',
        // 输出名称
        generator: {
          // [hash:10] 取hash值前10位
          filename: 'static/media/[hash][ext][query]'
        }
      },
    ]
  },
  plugins: [
    // plugins的配置
  ],
  mode: "development",
}